<template>
  <section>
    <el-row :gutter="10">
      <template v-for="ele in elementArray">
        <el-col :key="ele.key"
                :span="ele.span"
                class="col-style">
          <label>{{ele.label}} </label>
          <div v-if="ele.key === 'transportMode'"
               class="options-style">
            <template v-for="(option, oIndex) in elementData[ele.key]">
              <div v-if="option.value"
                   :key="oIndex"
                   class="mr8">
                <i class="el-icon-success"></i>
                <span>{{option.label}}</span>
              </div>
            </template>
          </div>
          <div v-else>
            {{elementData[ele.key]}}
          </div>
        </el-col>
      </template>
    </el-row>
  </section>
</template>

<script>
export default {
  name: "Descriptions",
  props: {
    elementArray: {
      type: Array,
      default: []
    },
    elementData: {
      type: Object,
      default: {}
    }
  }
}
</script>

<style scoped>
.col-style {
  display: flex;
  line-height: 34px;
}
label {
  text-align: right;
  width: 100px;
  margin-right: 15px;
}
.options-style {
  display: flex;
  color: var(--prev-color-primary);
}
.mr8 {
  margin-right: 8px;
}
</style>
